<div id="tb<?php echo $uniqid;?>">
    <table cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td colspan="3">
                <template v-for="(modeName, mode) in event_list">
                    <span class="l-btn l-btn-small l-btn-plain" :class="params.mode==mode?'selected':''"
                          @click="filter(mode)"><span class="l-btn-text">{{modeName}}</span></span>
                </template>
            </td>
        </tr>
        <tr>
            <td style="padding: 0 10px;"><span style="line-height:30px;">变动日期：</span>
                <input id="jindoulogStartOn" v-model="params.jindoulog_start" style="width:110px" type="text"
                       class="easyui-datebox"> </input>至
                <input id="jindoulogEndOn" v-model="params.jindoulog_end" style="width:110px" type="text"
                       class="easyui-datebox"> </input>
            </td>
            <td style="padding: 0 10px;">
                <select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" @change="keywordsTypeChange" style="width:120px; border-color: #cccccc !important;">
                    <option value="user_id">用户ID</option>
                    <option value="user_phone">用户手机号</option>
                </select>
                <input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
                       type="text"> </input>
            </td>
            <td>
                <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                        class="l-btn-text">查询</span></span></a>
                <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                        class="l-btn-text">重置</span></span></a>
                <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                        class="l-btn-text">重载</span></span></a>
                <a href="javascript:void(0);" @click="allExport" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                        class="l-btn-text">导出</span></span></a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="con"  style="-moz-user-select:none;">
    <table id="jindoulogTable"></table>
</div>
<div id="jindoulogDlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
    var JindoulogVm = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            params: {
                jindoulog_start: '',
                jindoulog_end: '',
                keywords: '',
                keywordsType:'user_id',
                mode: 'all'
            },
            defParams: {
                jindoulog_start: '',
                jindoulog_end: '',
                keywords: '',
                keywordsType:'user_id',
                mode: 'all'
            },
            event_list:JSON.parse('<?php echo addslashes($event_list);?>'),
            initLoad:false,
        },
        filters: {
            formatDate(nS){
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            }
        },
        mounted() {
            setTimeout(()=>{
                this.mounted();
            }, 200);
        },
        methods: {
            mounted: function (){
                $('#tb<?php echo $uniqid;?> #jindoulogStartOn').datebox('setValue', this.params.jindoulog_start);
                $('#tb<?php echo $uniqid;?> #jindoulogEndOn').datebox('setValue', this.params.jindoulog_end);
                this.init();
            },
            init: function () {
                this.params.jindoulog_start = $('#tb<?php echo $uniqid;?> #jindoulogStartOn').datebox('getValue');
                this.params.jindoulog_end = $('#tb<?php echo $uniqid;?> #jindoulogEndOn').datebox('getValue');
                if(this.params.keywordsType == 'user_phone'){
                    if(this.params.keywords.length > 0 && this.params.keywords.length < 4){
                        $('#tb<?php echo $uniqid;?> .keywords_input_search_box').focus().tooltip({
                            position: 'top',
                            content: '<span style="color:#ff0000">查询时，用户手机号不能少于4位数！</span>',
                        });
                        return false;
                    }
                }
                JindoulogReload();
            },
            filter(mode) {
                this.params.mode = mode;
                this.init();
            },
            keywordsTypeChange: function (e){
                let placeholder = '请输入内容';
                if(this.params.keywordsType == 'user_phone'){
                    placeholder = '用户手机号不能少于4位数';
                }
                $('#tb<?php echo $uniqid;?> .keywords_input_search_box').attr('placeholder',placeholder);
            },
            reset:function (){
                this.params = JSON.parse(JSON.stringify(this.defParams));
                this.mounted();
            },
            allExport:function () {
                showLoading('.con');
                $.post('/admin/memberjindou/logexport', {
                    keywordsType: this.params.keywordsType,
                    keywords: this.params.keywords,
                    start_on: this.params.jindoulog_start,
                    end_on: this.params.jindoulog_end,
                    mode: this.params.type,
                }, function (data) {
                    hideLoading();
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        eventmaterialDownload(data.data);
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json').fail((response)=> {
                    hideLoading();
                    $.messager.alert('提示', response.responseText, 'warning');
                });
            },
        }
    });

    var JindoulogReload = function () {
        if(JindoulogVm.initLoad){
            JindoulogVm.initLoad = false;
        }else{
            $("#jindoulogTable").datagrid('load', JindoulogVm.params);
        }
    };

    var JindoulogSearch = function () {
        var height = $(window).height() - $(".top").height() - 46;
        var width = $(window).width() - $(".leftmenu").width() - 8;
        $("#jindoulogTable").datagrid({
            title: '金豆变动记录管理',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 20, 50, 100],
            method: 'post',
            sortName: 'created_at',
            sortOrder: 'desc',
            idField: 'id',
            url: '/admin/memberjindou/log',
            queryParams: JindoulogVm.params,
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            loadMsg:'正在处理，请稍后。。。',
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
                {field:'get_member',title:'用户', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
                        let content = '';
                        if(value){
                            if(value.avatar){
                                content += '<div style="display: flex" class="touxiang_wenzi">';
                                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
                            }else{
                                content += '<div class="touxiang_wenzi">';
                            }
                            content += '用户ID：<span>'+rowData.member_id+'</span><br>';
                            if(value.realname){
                                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
                            }else{
                                content += '昵称：<span>'+value.nickname+'</span><br>';
                            }
                            content += '手机号：<span>'+value.phone+'</span>';
                            if(value.avatar){content += '</div>';}
                            content += '</div>';
                        }
                        return content;
                    }},
                {field:'event_text',title:'变动项目', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
                        return '<span class="event_'+ rowData.event +'">'+value+'</span>';
                    }
                },
                {field:'jindou',title:'金豆', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
                        let spanClass = value > 0 ? 'money_add' : 'money_subtract';
                        return '<span class="'+spanClass+'">'+ parseFloat(value)+'元</span>';
                    }},
                {field:'before',title:'金豆变动前后', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
                        return '<span class="change_before">' + value + '</span>&nbsp;&nbsp;>>&nbsp;&nbsp;<span class="change_after">'+ rowData.after + '元</span>';
                    }},
                {field:'created_at',title:'变动时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
                        return value?value:'--';
                    }},
                {field:'remark',title:'备注', width: fixWidth(20), align: "left", halign: 'center', styler:function (value, rowData, rowIndex) {
                        return {class:'log_remark'};
                    }, formatter:function (value,rowData,rowIndex){
                        return value?value:'无';
                    }},
            ]],
        });
        JindoulogVm.initLoad = true;
    };
    onDatagridResize("#jindoulogTable");
    JindoulogSearch();
</script>
<style>
    .log_remark > *{
        white-space: pre-wrap !important;
    }
    .change_before{
        color: #207ab0;
    }

    .change_after{
        color: #ef6d1b;
    }

    .money_add{
        color: #08de4d;
    }

    .event_orderpay{
        color: #750302;
    }

    .event_orderaward{
        color: #ee650c;
    }

    .event_refund{
        color: #007293;
    }

    .event_backofficechange{
        color: #bd09d9;
    }


    .l-btn-plain{
        border: rgba(0,0,0,0) 1px solid;
    }

    .datagrid-body-row td{
        line-height: 1.8em !important;
    }

    .datagrid-row td{
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.8em !important;
    }

    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }

    .touxiang_wenzi span{
        color: #007293;
    }

    .keywords_input_search_box{
        width: 300px;
        border-color: #cccccc;
    }
</style>
